<template>
  <div @scroll="listenScroll" class="details-frame over-tabbar" ref="detailsFrame">
    <tabControl ref="tabControlRef" @tab-item-click="tabClick" :titles="tabTag" :isShowTab="detailsIsShowTab">
    </tabControl>
    <van-nav-bar title="房屋详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="main" v-if="mainPart" v-memo="[mainPart]">
      <detailsSwipe :swipeData="mainPart.topModule.housePicture.housePics"></detailsSwipe>
      <!-- 顶部信息 -->
      <detailsTopModule name="描述" :ref="getActiveRef" :topInfos="mainPart.topModule"></detailsTopModule>
      <!-- 房屋设施信息 -->
      <detailsFacility name="设施" :ref="getActiveRef"
        :house-facility="mainPart.dynamicModule.facilityModule.houseFacility">
      </detailsFacility>
      <!-- 房东 -->
      <detailsLandLord name="房东" :ref="getActiveRef" :landlord="mainPart.dynamicModule.landlordModule">
      </detailsLandLord>
      <!-- 评论 -->
      <detailsComment name="评论" :ref="getActiveRef" :comment="mainPart.dynamicModule.commentModule"></detailsComment>
      <!-- 须知 -->
      <detailsNotice name="须知" :ref="getActiveRef" :orderRules="mainPart.dynamicModule.rulesModule.orderRules">
      </detailsNotice>
      <!-- 地图 -->
      <detailsMap name="周边" :ref="getActiveRef" :position="mainPart.dynamicModule.positionModule"></detailsMap>
      <!-- 价格说明 -->
      <detailsIntro :priceIntro="mainPart.introductionModule"></detailsIntro>
    </div>
    <div class="footer">
      <img src="@/assets/img/detail/icon_ensure.png" alt="">
      <div class="text">弘源旅途, 永无止境!</div>
    </div>

  </div>
</template>

<script setup>
import getScrollHook from "@/hooks/getScrollHook"
import tabControl from "@/components/tab-control/tab-control.vue";
import detailsIntro from "./cpns/details-08-intro.vue";
import detailsMap from "./cpns/details-07-map.vue";
import detailsNotice from "./cpns/details-06-notice.vue";
import detailsComment from "./cpns/details-05-comment.vue";
import detailsLandLord from "./cpns/details-04-landLord.vue";
import detailsFacility from "./cpns/details-03-facility.vue";
import detailsSwipe from "./cpns/details-01-swipe.vue";
import detailsTopModule from "./cpns/details-02-topModule.vue";
import { getDetailsAPI } from "@/servieces/index.js"
import { ref, computed, onMounted } from "vue";
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()

// 请求数据
const detailsInfos = ref({})
getDetailsAPI(route.params.houseId).then(res => {
  detailsInfos.value = res.data
})
// 剥离获取主体数据
const mainPart = computed(() => detailsInfos.value.mainPart)

function onClickLeft() {
  router.back()
}

// tab-bar 相关
const detailsFrame = ref()

const { scrollTop } = getScrollHook(detailsFrame)

const detailsIsShowTab = computed(() => {
  return scrollTop.value > 300
})

const refArr = ref({})
const tabTag = computed(() => {
  const arr = []
  for (let x in refArr.value) {
    arr.push(x)
  }
  return arr
})
const refOffsets = computed(() => {
  const obj = refArr.value
  const arr = []
  for (let i in obj) {
    arr.push(obj[i].offsetTop)
  }
  return arr
})

// 可以获取到所有组件的实例
// 给ref绑定一个函数，这个函数会在组件渲染和销毁时各执行一次
function getActiveRef(clickRef) {
  if (clickRef) {

    refArr.value[clickRef.$el.getAttribute('name')] = clickRef.$el
    // console.log(refArr)
  }
}
// 点击tabbar，跳转到相应位置
function tabClick(idx) {
  detailsFrame.value.scrollTo({
    top: refArr.value[tabTag.value[idx]].offsetTop - 44,
    behavior: "smooth"
  })
}

const tabControlRef = ref()
function listenScroll() {
  const distance = scrollTop.value + 44

  const arr = refOffsets.value
  let isLast = false
  const index = arr.findIndex((item, idx) => {
    // 数组边界处理
    if (idx === arr.length - 1 && distance > item - 220) {
      console.log("边界处理")
      isLast = true
      return true
    }
    return item >= distance
  })
  // console.log(index)
  if (index === 0 || isLast) {
    // console.log("调用子组件函数")
    // console.log(index)
    tabControlRef.value.setCurrentIndex(index)
    return
  }

  if (index > 0) {
    tabControlRef.value.setCurrentIndex(index - 1)
  }

}





</script>

<style lang="less" scoped>
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;

  img {
    width: 123px;
  }

  .text {
    margin-top: 12px;
    font-size: 12px;
    color: #7688a7;
  }
}
</style>